<template>
  <div>
  <h1>会员列表</h1>
 <hr>
 <input type="text" placeholder="会员姓名" v-model="data.queryInfor.name">
 <input type="text" placeholder="年龄" v-model="data.queryInfor.age">
        <input type="button" value="查询" @click="MemberShow">
 <table class="table table-bordered">
  <tr>
    <td>会员名称</td>
    <td>手机号</td>
    <td>身份证号</td>
    <td>出生日期</td>
    <td>年龄</td>
    <td>头像</td>
    <td>状态</td>
    <td>操作</td>
  </tr>
  <tr v-for="item in list">
    <td>{{ item.name }}</td>
    <td>{{ item.phone }}</td>
    <td>{{ item.szf }}</td>
    <td>{{ item.csrq }}</td>
    <td>{{ item.age }}</td>
    <td><img :src={{ item.tx }}></td>
    <td>{{ item.zt==1?"开启":"停用" }}</td>
    <td>
      <input type="button" v-if="item.zt='0'" value="开启" @click="ZT(item.id,item.zt)">
      <input type="button" v-else value="停用" @click="ZT(item.id,item.zt)">

    </td>
    
  </tr>
 </table> 
  </div>
</template>

<script setup lang="ts">
import {reactive,toRefs,onMounted} from 'vue'
import axios from 'axios';


var data:any=reactive({
   queryInfor:{
    name:'', 
    age:null
   },
   list:[]
})

var {queryInfor,list}=toRefs(data)
//文档就绪
onMounted (()=>{
  MemberShow()
})

const MemberShow=()=>{
  let obj={
   
   name:queryInfor.value.name,
   
  age:queryInfor.value.age,
 
}
  axios({
    url:'https://localhost:7000/api/Member/MemberShow',
    method:'get',
    params:obj
  })
  .then(res=>{

    list.value=res.data.data
    console.log(res)

  })
  .catch(err=>{
    console.log(err);
  })
}
//修改状态
const ZT=(id:any,state:any)=>{
  console.log(state)
    if(state==1)
    {
      state==0
    }
  var obj={
    id:id,
    zt:state
  }
  axios({
    url:'https://localhost:7000/api/Member/XiouGaiZT',
    method:'get',
    params:obj
  })
  .then(res=>{
    if(res.data.data==1)
  {
    alert('修改成功')
    MemberShow()

  }
  else{
    alert('修改失败');
    return
  }

  })
}


</script>

<style scoped>

</style>